﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="ViewArtical.aspx.cs" Inherits="LightWeb.Blog.ViewArtical" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="Scripts/json2.js"></script>
    <style type="text/css">
        .commentListWarpper { border-bottom: double 1px #eee; margin-bottom: 10px; }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <input id="articalId" type="text" class="hide" value="<%= this.ArticalId %>" />
    <asp:Repeater ID="repComment" runat="server">
        <ItemTemplate>
            <div class="commentListWarpper">
                <div class="commentHeader">
                    <a href='<%#Eval("site") %>' target="_blank"><span class="commentUser">
                        <%#Eval("Name")%></span></a> <span class="commonDate">
                            <%#Eval("Date")%></span>
                </div>
                <div class="commonContent">
                    <%#Eval("Content")%>
                </div>
                <div class="commonFooter liinlineul">
                    <ul>
                        <li>Reply</li>
                        <li>Reference</li>                        
                    </ul>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
    <div id="newCommentHere" class="commentListWarpper">
    </div>
    <div class="commententPanel">
        <ul>
            <li><span>User</span><input id="commenterName" type="text" /></li>
            <li><span>Email</span><input id="commenterEmail" type="text" /></li>
            <li><span>Site</span><input id="commenterSite" type="text" /></li>
            <li><span>Comment Content</span><p>
                <textarea id="commenterContent" cols="35" rows="10"></textarea></p>
            </li>
            <li>
                <input id="commentSubmit" type="button" value="Submit" /></li>
        </ul>
    </div>
    <div id="msg">
    </div>
    <script type="text/javascript">
        //Page Transfer Model
        function TrArticalComment(articalId, name, email, site, date, content) {
            this.ArticalId = articalId;
            this.Name = name;
            this.Email = email;
            this.Site = site;
            this.Date = date;
            this.Content = content;
        }
        function GetCurrentComment() {
            var comment = new TrArticalComment(
            $("#articalId").val(),
            $("#commenterName").val(),
            $("#commenterEmail").val(),
            $("#commenterSite").val(),
            new Date(),
            $("#commenterContent").val());
            return comment;
        }
        function AppenderNewCommentToEnd(comment) {
            $("<div class=\"commentHeader\"> <a href='" + comment.Site + "' target=\"_blank\"><span class=\"commentUser\">" + comment.Name + "</span></a> <span class=\"commonDate\">"
            + comment.Date + "</span></div><div class=\"commonContent\">" + comment.Content + "</div>").appendTo("#newCommentHere");
        }
    </script>
    <script type="text/javascript">
        var oldSubmitComment;
        $(function () {
            $("#commentSubmit").click(function () {
                var odata = GetCurrentComment();
                if (oldSubmitComment != null || oldSubmitComment != undefined) {
                    if (odata.Content == oldSubmitComment.Content) {
                        $("#msg").html("<span style=\"color: Red\"><strong>You already submited this comment, please add new content for submit.</strong></span>");
                        return false;
                    }
                }
                oldSubmitComment = odata; //Set old submit comment to current submit data
                var json_strng = JSON.stringify(odata);
                var beforeDate = new Date();
                $.ajax({
                    url: 'DataService/ArticalService.svc/NewComment',
                    type: 'POST',
                    contentType: 'application/json',
                    dataType: 'text',
                    data: json_strng,
                    processData: true,
                    isLocal: true,
                    beforeSend: function () {
                        $("#commentSubmit").val("Submitting...").attr("disabled", "disabled")
                    },
                    complete: function () {
                        $("#commentSubmit").val("Submit").removeAttr("disabled");
                    },
                    success: function (result) {
                        //var json = result.responseText.evalJSON(true);
                        var json2 = jQuery.parseJSON(result);
                        if (json2.Success) {
                            AppenderNewCommentToEnd(odata);
                            var completeDate = new Date();
                            $("#msg").html("Your spend <span style=\"color: Red\"><strong>" + (completeDate - beforeDate) + " Milliseconds </strong></span>on this submit, Thanks for your time.");
                        }
                        else {
                            $("#msg").html("<span style=\"color: Red\"><strong>Your submit fauiler, Detail message is:" + json2.ErrorMessage + "</strong></span>");
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        window.alert("ajax call fail");
                    }
                });
            });
        });
    </script>
</asp:Content>
